<template>
    <div class="search-root">
       <div v-if="books">
            <div class="head-input">
            <span ref="sty">
                <img src="/img/search.png">
                搜索书籍、作者
            </span>
             <input type="text" @focus="down" @blur="show">
        </div>
        <div class="hisblo">
            <div class="tit">历史搜索</div>
            <div class="list" v-for="his,i in searchList.historySearch" :key="i">{{his}}</div>
        </div>
        <div class="hotblo">
            <div class="tit">热门搜索</div>
            <div class="list" v-for="hot,i in searchList.hotSearch" :key="i">{{hot}}</div>
        </div>

        <div class="competitive">
            <h1 class="flag flag-title">
                <div>热门推荐</div>
                <div class="flag-right">more <img src="/img/arrow.png" alt=""></div>
            </h1>
            <div class="cream-box">
                <BookListSecond class="cream" v-for="s in books" :books="s">
                    <template slot="line1">
                       <p class="description">{{s.intro | strFunction}}</p>
                    </template>
                </BookListSecond>
            </div>
        </div>
       </div>

    </div>
</template>

<script>

import {mapState} from 'vuex';

import BookListSecond from "../components/BookListSecond.vue";
export default {
    // props: ["searchList"],
    computed:{
        ...mapState(["books","searchList"]),

    },
    components:{
        BookListSecond
    },
    methods:{
        down(){
            this.$refs.sty.style.display="none";
        },
        show(){
            this.$refs.sty.style.display="inline";
        },
         mounted(){
        this.$store.dispatch("getBooks");
    },
    }
}
</script>

<style scoped lang="less">
    img{
        position: relative;
        top: 0.8vw;
        right: 1vw;
        width: 4vw;
    }
    .search-root{
        height: 100vh;
    }
    .head-input{
        width: 92.3vw;
        height: 8.4vw;
        margin: 0 auto;
        border-radius: 1.1vw;
        background-color: #ebebeb;
        display: flex;
        position:relative;
        justify-content: center;
        align-items: center;
        color: #b1b1b1;
        font-size: @search;
        line-height: 8.4vw;
        /* font-weight: bold; */
        
    }
    .head-input span{
        
    }
    input{
        width: 92.3vw;
        height: 8.4vw;
        border-radius:1.1vw;
        border:none;
        padding-left:4vw;
        z-index: 100;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0)
    }

    .hisblo{
        margin-top:7.2vw;
        margin-left:3.9vw;
        margin-right:3.9vw
    }
    .hotblo{
        margin-top:9.3vw;
        margin-left:3.9vw;
        margin-right:3.9vw;
    }
    .tit{
        font-size:4.8vw;
        font-weight:bold;
        color:#333333;
    }

    .list{
        display:inline-block;
        background-color:#f2f2f2;
        padding:2vw 3.1vw;
        border-radius:3.6vw;
        margin-top:5.3vw;
        margin-left:3.3vw;
        margin-right:3.3vw;
        font-size:3.5vw;
        color:#b1b1b1;
    }
    
    .competitive{
        margin-top:9.3vw;
        padding: 0 3.9vw;
    }

    h1{
        font-size: @title;
    }
    h1 span{
        position: relative;
        bottom: 0.8vw;
    }
    h1 div{
        margin-left: 1.6vw;
        display: inline-block;
    }
    .flag-right img{
        position: relative;
        top: 0.8vw;
        height: 3.5vw!important;
        opacity: 0.7;
        width: 2.5vw;
    }
    .flag-title{
        display: flex;
        justify-content: space-between !important;
        width: 100%;
        padding-right: 3vw;
        .flag-right{
            color: #b1b1b1;
            font-size: 3.5vw;
            font-weight: normal;
        }
    }
    .cream{
        margin: 4.4vw 0;
    }
    .cream-box{
        margin-top: 0.9vw;
    }

</style>